<template>
    <Card shadow>
       <p slot="title">
            <Icon type="ios-film-outline"></Icon>
            角色管理
       </p>
       <div class="actioncontainer">
           <ButtonGroup>
               <Button type="primary" @click="showAdd=true">添加</Button>
                <Button type="error" @click="removeHandler">删除</Button>
           </ButtonGroup>

       </div>
       <Table border :columns="cols" :data="roles" @on-selection-change="selectChanges">
        <template slot-scope="{ row }" slot="name">
            <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="editHandler(row)">修改</Button>
            <Button type="error" size="small" @click="removeSingle(row.id)">删除</Button>
        </template>
    </Table>
    <Drawer title="角色添加" :width="30" :closable="true" :mask-closable="false" v-model="showAdd">
        <Create @close="closeAddHandler" :roleNum="rolesCount"></Create>
    </Drawer>

    <Drawer title="角色修改" :width="30" :closable="true" :mask-closable="false" v-model="showEdit">
        <Edit @close="closeEditHandler" :role="editRole"></Edit>
    </Drawer>
    </Card>
</template>
<script>
import { getAllRoles, remove } from '../../api/role'
import Create from '../../components/roles/Create'
import Edit from '@/components/roles/Edit'
export default {
  data () {
    return {
      cols: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          key: 'roleName'
        },
        {
          title: '描述',
          key: 'roleDesc'
        },

        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      roles: [],
      showAdd: false, // 添加窗口是否显示
      showEdit: false, // 修改窗口是否显示
      rolesCount: 0, // 角色数量，作为roleSort的默认值
      selectIds: [], // 选中的ids
      editRole: {}
    }
  },
  components: {
    Create, Edit
  },
  methods: {
    getlist () {
      getAllRoles().then((result) => {
        this.roles = result.data.data
        this.rolesCount = this.roles.length + 1
      })
    },
    closeAddHandler () {
      this.showAdd = false
      this.getlist()
    },
    closeEditHandler () {
      this.showEdit = false
      this.getlist()
    },
    editHandler (role) {
      this.editRole = {
        id: role.id,
        roleName: role.roleName,
        roleDesc: role.roleDesc,
        roleSort: role.roleSort
      }
      this.showEdit = true
    },
    removeSingle (id) {
      this.selectIds = [id]
      this.removeHandler()
    },
    removeHandler () {
      if (this.selectIds.length === 0) {
        this.$Message.info('请选择删除项')
        return
      }
      this.$Modal.confirm({
        title: '请确认',
        content: '确认要删除选中记录吗？',
        onOk: () => {
          remove(this.selectIds).then(result => {
            if (result.data.success) {
              this.getlist()
            }
          })
        }
      })
    },
    selectChanges (selections) {
      // 获取选中的id
      let ids = selections.map(obj => {
        return obj.id
      })
      this.selectIds = ids
    }
  },
  created () {
    this.getlist()
  }

}
</script>

<style scoped>
.actioncontainer{
    line-height: 40px;
    margin-bottom: 3px;
}
</style>
